<template>
    <Dialog :app-dialog="appDialog">
        <el-radio-group v-model="selectValue" class="holiday_box">
            <el-radio
                v-for="item in holiday_list"
                :key="item.festival_name"
                class="holiday_item"
                :label="item.date"
                :value="item.festival_name"
                >{{ item.festival_name }}</el-radio
            >
        </el-radio-group>
    </Dialog>
</template>
<script setup lang="ts">
import Dialog from './Dialog.vue';
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { festivalDay } from '@/api/smartMarketing/sop';
import { getSetionId, IsNotEmpty } from '@/utils/utils';
const emits = defineEmits(['submit']);
const selectValue = ref('');
const holiday_list = ref([]);
// 取消
const cancelHandel = () => {
    selectValue.value = '';
    appDialog.visible = false;
};

// 保存
const submitHandel = async () => {
    const data = getSelectDay(selectValue.value, holiday_list.value);
    emits('submit', data);
    cancelHandel();
};
// 弹框
const appDialog = reactive({
    visible: false,
    title: '选择节日',
    width: '480px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存'
});
// 节假日
const getHolidDays = async () => {
    const res = await festivalDay();
    holiday_list.value = res;
};
const getSelectDay = (str: string, data: any[]) => {
    let arr: any[] = [];
    if (IsNotEmpty(data)) {
        arr = data.find((item: any) => item.date === str);
    }
    return arr;
};
watch(appDialog, val => {
    getHolidDays();
});
defineExpose({
    appDialog,
    selectValue
});
</script>
<style lang="scss" scoped>
.holiday_box {
    display: flex;
    padding-left: 32px;
    box-sizing: border-box;

    .holiday_item {
        width: 33.33%;
        margin-right: 0;
    }
}
</style>
